window.addEventListener("load", () => {
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// 后台数据渲染到列表
	let html = "";
	apiTypeData.forEach((v, i) => {
		if (i === 0) {
			html += `<li class='active' title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class='fw-bold' title='${v.keyword}'>${v.name}</li>`;
		} else {
			html += `<li title='${v.keyword}'>${v.name}</li>`;
		}
	});
	$(".api ul").innerHTML = html;

	// 鼠标点击搜索框交互效果
	$(".api ul li").forEach((v) => {
		v.addEventListener("click", () => {
			// 交互效果-光标
			$(".api ul li").forEach((item) => {
				item.classList.remove("active");
			});
			v.classList.add("active");
			// 交互效果-渲染到搜索框
			$(".api .search strong").textContent = v.textContent;
			$(".api .search input").value = v.title;
		});
	});

	//API卡片列表区域 模拟服务器返回的数据
	let listDataArr = [
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南111111",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2222222",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南33333333",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南44444444",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// 封装卡片列表渲染函数
	function render(pagination, pagesize, arr) {
		// 截取当前页数组
		let currentArr = arr.slice(
			(pagination - 1) * pagesize,
			pagination * pagesize
		);
		// 遍历拼接html结构
		let html2 = "";
		currentArr.forEach((v, i) => {
			html2 += `<li class="text-c fs-14 rel">
                <img src="../imgs/${v.img}" />
                <p class="fc-grey lh-44">${v.name}</p>
                <p class=${v.isSpecial ? "changeColor" : ""}>${v.price}</p>
                <a href="#" class="fc-white lh-32 abs">申请数据</a>
                ${v.isSpecial ? '<span class="fs-12 abs">企业专用</span>' : ""}
                </li>`;
		});
		$(".card-list ul").innerHTML = html2;
	}

	// 分页器点击事件
	$(".card-list ol li").forEach((v) => {
		v.addEventListener("click", () => {
			// 分页器激活样式效果
			$(".card-list ol li").forEach((item) => {
				item.classList.remove("active");
			});
			v.classList.add("active");
			// 分页器点击分页调用函数
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	// 先调用第一页
	render(1, 5, listDataArr);

	// 下一页点击事件;
	$(".card-list ol a").addEventListener("click", () => {
		// 获取当前页码
		let p = Number($(".card-list ol li.active").textContent);
		// 移除激活样式
		$(".card-list ol li.active").classList.remove("active");
		// 下一页码添加激活样式
		if (p >= 4) {
			p = 0;
		}
		$(".card-list ol li")[p].classList.add("active");
		// 下一页卡片渲染
		render(p + 1, 5, listDataArr);
	});

	// 点击‘申请数据’弹出蒙层（委派）
	$(".card-list ul").addEventListener("click", (e) => {
		if (e.target.localName === "a") {
			$("#mask").style.display = "block"; //弹出蒙层
			document.body.style.overflow = "hidden"; //滚动条隐藏
			e.preventDefault(); //阻止a跳转
		}
	});
	// 点击蒙层让蒙层消失
	$("#mask").addEventListener("click", (e) => {
		if (e.target.id === "mask") {
			$("#mask").style.display = "none";
			document.body.style.overflow = "auto";
		}
	});
	// 选项卡交互效果调用函数
	tabs($("#modalBox ul li"), $("#modalBox ol li "));
});
